<template>
  <j-modal
    switchFullscreen
    :title="title"
    :width="1200"
    :visible="visible"
    :centered="true"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-divider style="font-weight: 600;margin-top: 0px;" orientation="left">基础信息</a-divider>
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk" :loading="confirmLoading" v-if="!disableSubmit">确认</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <!--          所属区域-->
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品编号"
            >
              <a-input-search placeholder="商品编号" v-decorator="[ 'goodsCode',validatorRules.goodsCode]"
                              onfocus="this.blur()" @search="productSearch" :disabled="disableSubmit">
                <a-button icon="search" style="color: #2eabce" slot="enterButton">
                </a-button>
              </a-input-search>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品名称"
            >
              <a-input :disabled="true" placeholder="请输入" v-decorator="['goodsName',validatorRules.goodsName ]"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品分类"
            >
              <a-input :disabled="true" placeholder="请输入" v-decorator="['classifyName',validatorRules.classifyName ]"/>
              <input type="hidden" v-decorator="['classifyCode']"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="有效期"
            >
              <a-range-picker style="width:100%" format="YYYY-MM-DD" :disabled="disableSubmit" value-format="YYYY-MM-DD"
                              v-decorator="['dateShow']"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div>
        <a-divider style="font-weight: 600;margin-top: 0px;" orientation="left">组织范围</a-divider>

        <a-divider style="font-weight: 400;margin-top: 0px;" orientation="left">包含</a-divider>

        <div style="display: flex;padding:0 50px 0px 50px;margin-top: -20px">
          <div style="width: 33%;">
            <row-edit-table
              ref="customerNTable"
              rowKey="orgCode"
              :chooseUrl="orgurl"
              :addButton="!disableSubmit"
              :disableDelete="disableSubmit"
              mode="checkBox"
              :data.sync="containsOrgList"
              :columns="orgColumns"
              :tableHeight="200"
              :chooseColumns="orgColumnsChoose"
              :conditions="[{ label: '组织编号', field: 'orgCode' }, { label: '组织名称', field: 'orgName' }]"
            ></row-edit-table>
          </div>
          <!--          <div style="width: 33%;margin-left: 30px">-->
          <!--            <row-edit-table-->
          <!--              ref="customerNTable"-->
          <!--              rowKey="customerGroupCode"-->
          <!--              :chooseUrl="cusGroupurl"-->
          <!--              :addButton="!disableSubmit"-->
          <!--              :disableDelete="disableSubmit"-->
          <!--              mode="checkBox"-->
          <!--              :tableHeight="200"-->
          <!--              :data.sync="containsCusGroupList"-->
          <!--              :columns="cusGroupColumns"-->
          <!--              :chooseColumns="cusGroupColumnsChoose"-->
          <!--              :conditions="[{ label: '客户组编号', field: 'customerGroupCode' }, { label: '客户组名称', field: 'customerGroupName' }]"-->
          <!--            ></row-edit-table>-->
          <!--          </div>-->
          <div style="width: 33%;margin-left: 30px">
            <cust-row-edit-table
              ref="customerNTable"
              rowKey="custCode"
              :addButton="!disableSubmit"
              :disableDelete="disableSubmit"
              :chooseUrl="cusurl"
              :tableHeight="200"
              mode="checkBox"
              :data.sync="containsCusList"
              :columns="cusColumns"
              :queryParams="{permflag: 'good_customer_page'}"
              :chooseColumns="cusColumnsChoose"
              :conditions="[{ label: '客户名称', key: 'custName' },{ label: '客户编号批量', key: 'customerCodeAll' }, { label: '客户名称批量', key: 'customerNameAll' }]"
            ></cust-row-edit-table>
          </div>
        </div>
        <a-divider style="font-weight: 400;margin-top: 20px;" orientation="left">排除</a-divider>
        <div style="display: flex;padding:0 50px 0px 50px;margin-top: -20px">
          <div style="width: 33%;">
            <row-edit-table
              ref="customerNTable"
              rowKey="orgCode"
              :chooseUrl="orgurl"
              :addButton="!disableSubmit"
              :disableDelete="disableSubmit"
              mode="checkBox"
              :data.sync="notContainsOrgList"
              :queryParams="{permflag: 'good_customer_page'}"
              :columns="orgColumns"
              :tableHeight="200"
              :chooseColumns="orgColumnsChoose"
              :conditions="[{ label: '组织编号', field: 'orgCode' }, { label: '组织名称', field: 'orgName' }]"
            ></row-edit-table>
          </div>
          <!--          <div style="width: 33%;margin-left: 30px">-->
          <!--            <row-edit-table-->
          <!--              ref="customerNTable"-->
          <!--              rowKey="customerGroupCode"-->
          <!--              :addButton="!disableSubmit"-->
          <!--              :disableDelete="disableSubmit"-->
          <!--              :chooseUrl="cusGroupurl"-->
          <!--              mode="checkBox"-->
          <!--              :tableHeight="200"-->
          <!--              :data.sync="notContainsCusGroupList"-->
          <!--              :columns="cusGroupColumns"-->
          <!--              :chooseColumns="cusGroupColumnsChoose"-->
          <!--              :conditions="[{ label: '客户组编号', field: 'customerGroupCode' }, { label: '客户组名称', field: 'customerGroupName' }]"-->
          <!--            ></row-edit-table>-->
          <!--          </div>-->
          <div style="width: 33%;margin-left: 30px">
            <cust-row-edit-table
              ref="customerNTable"
              rowKey="customerCode"
              :addButton="!disableSubmit"
              :disableDelete="disableSubmit"
              :chooseUrl="cusurl"
              :tableHeight="200"
              mode="checkBox"
              :data.sync="notContainsCusList"
              :columns="cusColumns"
              :chooseColumns="cusColumnsChoose"
              :conditions="[{ label: '客户名称', key: 'customerName' },{ label: '客户编号批量', key: 'customerCodeAll' }, { label: '客户名称批量', key: 'customerNameAll' }]"
            ></cust-row-edit-table>
          </div>
        </div>
      </div>
    </a-spin>
    <proChose ref="prochoose" v-bind="modalProps" @okbro="okbropro"></proChose>

  </j-modal>
</template>

<script>
import proChose from '@comp/cn-components/ProChose'
import CustRowEditTable from '@/components/cn-components/CustRowEditTable'
import RowEditTable from '@/components/cn-components/RowEditTable'
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import salePlaceCard from '@/components/cn-components/SalePlaceCard.vue'
import { isMobile, isPermit } from '@/utils/validate'
import UploadImage from '@/components/upload-image/UploadImage'
import JImageUpload from '@/components/cn-form/JImageUpload'
import Area from '@/components/utils/Area'

export default {
  name: 'proSalePlaceModal',
  components: { salePlaceCard, RowEditTable, proChose, CustRowEditTable },
  data() {
    return {
      disableSubmit: false,
      orgurl: window._CONFIG['domianURL'] + '/cnOrgController/findOrgListByParentCode',
      cusGroupurl: window._CONFIG['domianURL'] + '/customergroupIsdn/cnCustomerGroupIsdn/findGroupIsdnPageList',
      cusurl: window._CONFIG['domianURL'] + '/customer/cnCustomer/findPageList',
      manobjList: [0],
      areaData: '',
      iconLoading: false,
      containsOrgList: [],
      containsCusGroupList: [],
      containsCusList: [],
      notContainsOrgList: [],
      notContainsCusGroupList: [],
      notContainsCusList: [],
      orgColumns: [
        {
          title: '组织编号',
          align: 'center',
          dataIndex: 'orgCode',
          width: 100
        },
        {
          title: '组织名称',
          align: 'center',
          dataIndex: 'orgName'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      cusGroupColumns: [
        {
          title: '客户组编号',
          align: 'center',
          dataIndex: 'customerGroupCode'
        },
        {
          title: '客户组名称',
          align: 'center',
          dataIndex: 'customerGroupName'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      cusColumns: [
        {
          title: '客户编号',
          align: 'center',
          // width: 100,
          dataIndex: 'custCode'
        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'custName'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 60,
          scopedSlots: { customRender: 'action' }
        }
      ],
      orgColumnsChoose: [
        {
          title: '组织编号',
          align: 'center',
          dataIndex: 'orgCode'

        },
        {
          title: '组织名称',
          align: 'center',
          dataIndex: 'orgName'
        }
      ],
      cusGroupColumnsChoose: [
        {
          title: '客户组编号',
          align: 'center',
          dataIndex: 'customerGroupCode'

        },
        {
          title: '客户组名称',
          align: 'center',
          dataIndex: 'customerGroupName'

        }
      ],
      cusColumnsChoose: [
        {
          title: '客户编号',
          align: 'center',
          dataIndex: 'custCode'

        },
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'custName'

        }
      ],
      name: '',
      areaLinkage: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        goodsCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        goodsName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        classifyName: {
          rules: [
            { required: true, message: '' }
          ]
        }
      },
      addOrUpdateUrl: window._CONFIG['domianURL'] + '/goodssalesscope/cnGoodsSalesScope/saveOrUpdate'
    }
  },
  computed: {
    modalProps() {
      return {
        name: this.name
      }
    }
  },
  created() {

  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      record.dateShow = [record.effectiveStartDate, record.effectiveEndDate]
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, Object.keys(this.model)))
      })
      if (record.id) {
        this.containsOrgList = record.includedOrgList.map(item => {
          return {
            orgCode: item.dataCode,
            orgName: item.dataName,
          }
        })
        this.containsCusList = record.includedCustList.map(item => {
          return {
            custCode: item.dataCode,
            custName: item.dataName,
          }
        })
        this.containsCusGroupList = record.includedCustOrgList.map(item => {
          return {
            customerGroupCode: item.dataCode,
            customerGroupName: item.dataName,
          }
        })
        this.notContainsOrgList = record.excludedOrgList.map(item => {
          return {
            orgCode: item.dataCode,
            orgName: item.dataName,
          }
        })
        this.notContainsCusList = record.excludedCustList.map(item => {
          return {
            custCode: item.dataCode,
            custName: item.dataName,
          }
        })
        this.notContainsCusGroupList = record.excludedCustOrgList.map(item => {
          return {
            customerGroupCode: item.dataCode,
            customerGroupName: item.dataName,
          }
        })
      }

    },
    close() {
      this.handleCancel()
    },
    okbropro(val, status, status2) {
      let objs = JSON.parse(JSON.stringify(val[0]))
      this.form.setFieldsValue({
        goodsCode: objs.goodsCode,
        goodsName: objs.goodsName,
        classifyName: objs.classifyName,
        classifyCode: objs.classifyCode,
      })
    },
    productSearch(status) {
      this.$refs.prochoose.rowKey = 'id'

      let formconfig = [
        {
          key: 'goodsCode',
          label: '商品编号'
        },
        {
          key: 'goodsName',
          label: '商品名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '商品编号',
            align: 'left',
            dataIndex: 'goodsCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '商品名称',
            align: 'left',
            dataIndex: 'goodsName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/goods/cnGoods/findPageList',
        multiple: false,
        columW: 10
      }

      this.name = '商品'
      let dataSource = []

      console.log(dataSource)
      this.$refs.prochoose.edit(formconfig, tableconfig, 'goodsCode', 'goodsName', dataSource)
    },
    handleCancel() {
      this.containsOrgList = []
      this.containsCusList = []
      this.containsCusGroupList = []
      this.notContainsOrgList = []
      this.notContainsCusList = []
      this.notContainsCusGroupList = []
      this.visible = false
    },
    handleOk() {
      let vm = this
      this.form.validateFields((err, value) => {
        if (!err) {
          let includedOrgList = this.containsOrgList.map(item => {
            return {
              dataType: 'org',
              dataCode: item.orgCode,
              dataName: item.orgName,
              detailType: 1
            }
          })
          let includedCustList = this.containsCusList.map(item => {
            return {
              dataType: 'cust',
              dataCode: item.custCode,
              dataName: item.custName,
              detailType: 1
            }
          })
          let includedCustOrgList = this.containsCusGroupList.map(item => {
            return {
              dataType: 'co',
              dataCode: item.customerGroupCode,
              dataName: item.customerGroupName,
              detailType: 1
            }
          })
          let excludedOrgList = this.notContainsOrgList.map(item => {
            return {
              dataType: 'org',
              dataCode: item.orgCode,
              dataName: item.orgName,
              detailType: 0
            }
          })
          let excludedCustList = this.notContainsCusList.map(item => {
            return {
              dataType: 'cust',
              dataCode: item.custCode,
              dataName: item.custName,
              detailType: 0
            }
          })
          let excludedCustOrgList = this.notContainsCusGroupList.map(item => {
            return {
              dataType: 'co',
              dataCode: item.customerGroupCode,
              dataName: item.customerGroupName,
              detailType: 0
            }
          })

          let obj = Object.assign({}, this.model, value, {
            includedOrgList,
            includedCustList,
            includedCustOrgList,
            excludedOrgList,
            excludedCustList,
            excludedCustOrgList
          })
          obj.effectiveStartDate = obj.dateShow[0]
          obj.effectiveEndDate = obj.dateShow[1]
          this.confirmLoading = true
          postAction(this.addOrUpdateUrl, obj).then(res => {
            if (!res.success) {
              vm.$message.error(res.message)
              return
            } else {
              vm.$emit('ok')
              this.close()
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.info-line {
  display: flex;
  flex-direction: row;
  margin: 0 0 8px 4px;
}

.info-line:before {
  content: "";
  flex: 0.05;
  border-bottom: 1px solid #ebedee;
  margin: auto 4px;
}

.info-line:after {
  content: "";
  flex: 0.95;
  border-bottom: 2px solid #ebedee;
  margin: auto 4px;
}

.big-one {
  padding: 10px;
  display: flex;
  align-items: center;


  .big-two-in {
    width: 20px;
    margin-right: 16px;
    writing-mode: vertical-lr;
    letter-spacing: 1px;
  }

  .big-card-in {
    flex: 1;
    display: flex;
    justify-content: space-between;
  }

}


</style>
